<template>
  <div class="withdrawdeposit">
    <van-nav-bar title="提现" @click-left="goBack()" left-text="" left-arrow/>
    <div style="width: 100%;height: 140px;background-color: #FFFFFF;margin-top: 10px">
      <p style="width: 100%; float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 13pt;text-align: left">
        可提现金额</p>
      <p style="float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 35pt;">￥{{ this.prices }}</p>
    </div>
    <div style="width: 100%;height: 200px;background-color: #FFFFFF;margin-top: 10px">
      <p style="width: 100%; float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 13pt;text-align: left">
        请输入提现金额</p>

      <p style="width: 70px; float: right;font-size : 11pt;text-align: center;
        border: 2px solid #B1BCC0;border-radius: 10px;margin: -20px 25px 0 0;" @click="AssetsQuan()">全部提现</p>
      <div style="width: 100%;height: 70px;color: #B1BCC0; float: left">
        <p style="float: left; margin: 30px 0 0 25px;font-weight: bolder;font-size : 45pt;">￥</p>
        <van-form validate-first>
          <van-field
            v-model="value1"
            style="width: 300px;height: 60px;font-size: 40pt;margin-top: 25px"
          />
        </van-form>
<!--        <p>单笔限制最低提现额度100元</p>-->


        <div style="margin-top: 150px;width: 100%;height: 60px;padding-top:24px;background-color: #FFFFFF">
          <van-button round block type="info" @click="onFailed"
                      style="color: #FFFFFF;font-size: 13pt; width: 380px;height: 40px;
                    margin-left: 5px;background-color: #4EA9CB">立即提现
          </van-button>
        </div>
      </div>
    </div>
    <div class="withdraw-method-section">
      <span class="title">提现方式</span>
      <div class="bank-info">
        <van-cell title="选择提现方式" @click="fangshi()" is-link></van-cell>

        <el-dialog title="请选择银行卡" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="">
              <div v-for="b in bankCards" :key="index" class="bank-card">
                <input type="radio" :value="b.id" v-model="selectedCard">
                <img :src="b.cardImg" alt="Bank Logo" class="bank-logo"> {{ b.cardName }} <br>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="tobindcard(id)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      selectedCard: null,
      driverInfo: {},
      id: '',
      form: {},
      dialogFormVisible: false,
      bankCards: [],
      value1: "",
      summoney: "",
      tixianmoney: "",
      useId: 0,
      prices: {}
    };
  },
  async created() {
    await this.findDriverByTel();
    await this.zichanzonge();
    this.summoney = sessionStorage.getItem("summoney");
    this.useId = sessionStorage.getItem("useId")
    this.pric()
  },
  methods: {
    async pric() {
      axios.get(`order/driver/sjById?id=${this.useId}`).then(res => {
        this.prices = res.data.totalAssets
        sessionStorage.setItem("sumpricefund", JSON.stringify(res.data.totalAssets))
        // console.log("yyyyyyyyyyyy" + this.prices)
      })
    },
    async zichanzonge() {
      try {
        const response = await axios.post(`jiedan/riderQueue/getDriverSumPrive?id=${this.driverInfo.id}`);
        console.log("=========" + response)
      } catch (error) {
        console.error("获取资产总额失败:", error);
      }
    },
    tobindcard(id) {
      this.dialogFormVisible = false;
    },
    async fangshi() {
      this.dialogFormVisible = true;
      try {
        const response = await axios.get('/personal/personal/bankCard');
        this.bankCards = response.data;
      } catch (error) {
        console.error("获取银行卡列表失败:", error);
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    //全部提现
    AssetsQuan() {
      this.value1 = this.prices;
      if (this.value1 != 0) {
      } else if (this.value1 == 0) {
        this.$message.error('提现金额不能为0')
      }
    },
    async findDriverByTel() {
      try {
        const tel = JSON.parse(localStorage.getItem('login'));
        const response = await axios.post('personal/personal/findByTel?tel=' + tel);
        this.driverInfo = response.data;
      } catch (error) {
        console.error("根据手机号查询司机信息失败:", error);
      }
    },
    //立即提现
    onFailed() {
      if (this.value1 <= this.summoney) {
        axios.get(`/order/driver/tixian?value1=${this.value1}&id=${this.driverInfo.id}`).then(res => {
          if (res.data.code == 200) {
            this.$message.success("提现成功")
            const tel = JSON.parse(localStorage.getItem('login'));
            axios.post(`personal/personal/updateSumMoney?withdrawMoney=${this.value1}&tel=${tel}&driverId=${this.driverInfo.id}`).then(res=>{
            })
          } else {
            this.$message.error("提现失败")
          }
        })
      }
    }
  },

};
</script>

<style scoped>
.zuo {
  text-align: left;
}

.withdrawdeposit {
  width: 100%;
  margin-top: 20px;
}

.withdraw-method-section {
  margin-bottom: 20px;
}

.title {
  display: block;
  margin-bottom: 10px;
}

.bank-info {
  display: flex;
  align-items: center;
}

.bank-logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.bank-card {

}
</style>
